<template>
  <!-- <a-form-model layout="inline">
    <a-form-model-item
      :label="item"
      v-for="(item, index) in jsonKeys"
      :key="index"
    >
      <span>{{ jsonValues[index] }}</span>
    </a-form-model-item>
  </a-form-model> -->
  <div class="expanded">
    <template v-if="!masterFormVisible && !slaveFormVisible">
      <a-empty description="获取表单内容为空" />
    </template>
    <template v-else>
      <a-tabs :animated="false" @change="tableChange">
        <template v-if="masterFormVisible">
          <a-tab-pane key="1" tab="表单内容"> </a-tab-pane>
        </template>
        <template v-if="slaveFormVisible">
          <a-tab-pane key="2" tab="弹窗表单内容"></a-tab-pane>
        </template>
      </a-tabs>
      <a-form ref="myform" :form="formOpinion">
        <k-form
          ref="formRenderRef"
          :form="formOpinion"
          :isView="isView"
          :drawingList="drawingList"
        >
        </k-form>
      </a-form>
    </template>
  </div>
</template>

<script>
import KForm from "@/components/TopVUI/k-form-design/packages/KFormPreview/preview.vue";

export default {
  props: {
    jsonData: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    KForm,
  },
  computed: {
    masterFormData() {
      const jsonData = this.jsonData;
      return jsonData.masterFormData || {};
    },
    slaveFormData() {
      const jsonData = this.jsonData;
      return jsonData.slaveFormData || {};
    },
    masterFormVisible() {
      return JSON.stringify(this.masterFormData) !== "{}";
    },
    slaveFormVisible() {
      return JSON.stringify(this.slaveFormData) !== "{}";
    },
    // masterFormKeys() {
    //   const masterFormData = this.masterFormData;
    //   return Object.keys(masterFormData);
    // },
    // masterFormVisible() {
    //   return this.masterFormKeys.length > 0;
    // },
    // slaveFormKeys() {
    //   const slaveFormData = this.slaveFormData;
    //   return Object.keys(slaveFormData);
    // },
    // slaveFormVisible() {
    //   return this.slaveFormKeys.length > 0;
    // },
  },
  data() {
    return {
      formOpinion: this.$form.createForm(this),
      current: "1",
      drawingList: {},
      isView: true,
    };
  },
  methods: {
    tableChange(key) {
      this.current = key;
      this.loadForm();
    },
    // 加载表单
    loadForm() {
      const { current } = this;
      if (current === "1") {
        this.loadDefaultForm();
      } else {
        this.loadSlaveForm();
      }
    },
    // 加载默认表单
    loadDefaultForm() {
      this.drawingList = this.masterFormData;
      this.$refs.formRenderRef &&
        this.$refs.formRenderRef.setData(this.drawingList);
    },
    // 加载弹窗表单
    loadSlaveForm() {
      this.drawingList = this.slaveFormData;
      this.$refs.formRenderRef &&
        this.$refs.formRenderRef.setData(this.drawingList);
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (this.masterFormData) {
        this.loadDefaultForm();
      } else {
        this.loadSlaveForm();
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.expanded {
  .ant-form-inline .ant-form-item {
    margin-right: 16px !important;
    margin-bottom: 0;
  }
  .ant-tabs-tabpane.ant-tabs-tabpane-active {
    height: auto !important;
  }
}
.title {
  margin: 0;
}
.second {
  margin-top: 16px;
}
</style>